<wide-header-page title="{{ name }}">
  <ion-buttons right>
    <button wide-header-bar-button clear class="option-button" (click)="showMoreOptions()" ion-button icon-only>
      <ion-icon name="ios-more" md="ios-more"></ion-icon>
    </button>
  </ion-buttons>
  <div page-content>
    <div class="contact-view-header">
      <gravatar [name]="name" [height]="80" [width]="80" [email]="email" [coin]="coin" [network]="network"></gravatar>
    </div>
    <ion-list class="bp-list">
      <ion-item>
        {{'Name' | translate}}
        <ion-note item-end>
          {{ name }}
        </ion-note>
      </ion-item>
      <ion-item *ngIf="email">
        {{'Email' | translate}}
        <ion-note item-end>
          {{ email }}
        </ion-note>
      </ion-item>
      <ion-item copy-to-clipboard="{{ address }}">
        {{'Address' | translate}}
        <div class="comment ellipsis">
          {{ address }}
        </div>
      </ion-item>
      <ion-item *ngIf="coin === 'xrp' && tag" copy-to-clipboard="{{ tag }}">
        {{'Destination Tag' | translate}}
        <div class="comment ellipsis">
          {{ tag }}
        </div>
      </ion-item>
      <ion-item>
        {{'Coin' | translate}}
        <ion-note item-end>
          {{ coin | uppercase }}
        </ion-note>
      </ion-item>
      <ion-item>
        {{'Network' | translate}}
        <ion-note item-end>
          {{ network }}
        </ion-note>
      </ion-item>
    </ion-list>
  </div>
</wide-header-page>